<html>
<head>
    <meta charset="UTF-8">
    <title>akochan_ui</title>
    <link rel="stylesheet" type="text/css" href="css/menu.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/game.css">
    <script type="text/javascript" src="/eel.js"></script>
    <script type="text/javascript" src="js/board.js"></script>
    <script type="text/javascript" src="js/log.js"></script>
    <script type="text/javascript" src="js/game.js"></script>
    <script type="text/javascript">
        async function open_file_name(file_name) {
            let file_open_err = await eel.open_file_name(file_name)();
            if (file_open_err == 0) {
                show_log(-1, true);
                reset_button_ui_log();
                log_pos_selected(0);
            }
        }

        function open_file() {
            // open_file自体をasyncにすると動かないかもしれないので、async部分はopen_file_nameとして分離
            var input = document.createElement('input');
            input.type = 'file';

            input.onchange = e => { 
                var file = e.target.files[0];
                open_file_name(file.name);
            }
            input.click();
        }

        function start_game(){
            let seed = window.prompt("Please input a random seed", "");
            if (seed != null) {
                seed = Number(seed);
                if (isNaN(seed) || seed < 0) {
                    window.alert('Please input a non-negative integer');
                } else {
                    eel.start_game(seed);
                }
            }
        }
    </script>
</head>

<body>
    <ul id="dropmenu">
        <li><a href="#">File</a>
          <ul>
            <li><a href="#" onclick="open_file()">Open</a></li>
            <li><a href="#">empty 0</a></li>
          </ul>
        </li>
        <li><a href="#">AI</a>
          <ul>
            <li><a href="#" onclick="start_game()">Start Game</a></li>
            <li><a href="#">empty 1</a></li>
          </ul>
        </li>
    </ul>
    <div class="main">
        <div id="board" class="board"></div>
        <div class="controller_container">
            <div id="log_table_container" class="log_table_container"></div>
        </div>
        <div id="tehai_ui"></div> <!-- tehai_uiがボードの中にあると、クリックしても反応しないことがあるため、外に出す-->
        <div>
            <ul id="default_button_ui" class="button_ui"></ul>
        </div>
        <div>
            <ul id="kan_button_ui" class="button_ui"></ul>
        </div>
    </div>
    <div id="dialog_end_kyoku">
        <div id="dialog_background"></div>
        <div id="dialog_content">
            <div id="end_kyoku_info"></div>
        </div>
    </div> 


    </div>
</body>
</html>